<template>
    <el-form ref="ruleFormRef" style="width: 100%" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon >
        <el-form-item label="选择用户" prop="user_id">
            <component :is="userSelect" :data=ruleForm.user_id :is_select="id" @onUserSelect="onUserSelect" />
        </el-form-item>
        <el-form-item label="选择角色" prop="role_id">
            <component :is="roleSelect" :data=ruleForm.role_id @onRoleSelect="onRoleSelect" />
        </el-form-item>
        <el-form-item label="入场时间" prop="start_date">
            <el-date-picker v-model="ruleForm.start_date" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="出场时间" prop="end_date">
            <el-date-picker v-model="ruleForm.end_date" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="考勤(天)" prop="work">
            <el-input-number v-model="ruleForm.work" :min="0" />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
            <el-input v-model="ruleForm.remarks" />
        </el-form-item>
    </el-form>
    <div class="mt20 text-center">
        <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
    </div>

    
</template>
  
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import roleSelect from "./components/roleSelect.vue";
import userSelect from "./components/userSelect.vue";
import http from '../../../util/request';
import { useRouter } from 'vue-router';
import router from '../../../router';
const id:any = ref(useRouter().currentRoute.value.params.id)
const loading = ref<boolean>(false)

interface RuleForm {
    id:number
    user_id:number
    role_id:number
    start_date:string
    end_date:string
    remarks:string
    work:number
} 

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    id:0,
    user_id:0,
    role_id:0,
    start_date:'',
    end_date:'',
    remarks:'/',
    work:0,
})


const onGetData = () => {
    if(ruleForm.value.id == 0){
        return
    }
    http.post('/projectUser',{id:ruleForm.value.id}).then((response:any)=>{
        ruleForm.value = response.data.data
        ruleForm.value.id = response.data.data.user_id
    })
}

const rules = reactive<FormRules<RuleForm>>({
    start_date: [
        { required: true, message: '请选择入场时间', trigger: 'blur' },
    ],
    end_date: [
        { required: true, message: '请选择出场时间', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            http.patch('user/bindProjectRole',ruleForm.value).then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);return
                }
                ElMessage.success(response.data.msg);
                router.push({ name: 'user'})
            })
                      
        } else {
            console.log('error submit!', fields)
        }
    })
}


onMounted(()=>{
    ruleForm.value.id = id.value
    onGetData()
})

const onRoleSelect = (data:number) => {
    ruleForm.value.role_id = data
}

const onUserSelect = (data:number) => {
    ruleForm.value.user_id = data
}


</script>
<style scoped>
</style>
